<template>
  <view class="container">
    <view class="bg-sear">
      <view class="scrolltop">
        <view class="section" @tap="toSearchPage">
          <image src="@/static/images/icon/search.png" class="search-img" />
          <text class="placeholder"> 搜索 </text>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- swiper -->
      <swiper
        :autoplay="autoplay"
        :indicator-color="indicatorColor"
        :interval="interval"
        :duration="duration"
        :indicator-active-color="indicatorActiveColor + ' '"
        :circular="true"
        class="pic-swiper"
        indicator-dots
        previous-margin="20rpx"
        next-margin="20rpx"
      >
        <block v-for="(item, index) in indexImgs" :key="index">
          <swiper-item class="banner-item">
            <view class="img-box">
              <image
                :src="item.imgUrl"
                :data-prodid="item.relation"
                class="banner"
                mode="aspectFit"
                @tap="toProdPage"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- end swiper -->

      <!-- 消息播放 -->
      <view v-if="news && news.length" class="message-play" @tap="onNewsPage">
        <image src="@/static/images/icon/horn.png" class="hornpng" />
        <swiper
          :vertical="true"
          :autoplay="true"
          :circular="true"
          duration="1000"
          class="swiper-cont"
        >
          <block v-for="(item, index) in news" :key="index">
            <swiper-item class="items">
              {{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <text class="arrow" />
      </view>
    </view>

    <!-- 公司简介 -->
    <view class="company-intro">
      <view class="intro-header">
        <text class="intro-title">公司简介</text>
      </view>
      <view class="intro-content">
        <text class="intro-text">
          盐城半导体集成技术研究院(江苏瀚微半导体科技有限责任公司)坐落在江苏省盐城市,是由盐城高新区与中科院半导体所原副所长杨富华教授创新团队开展产学研全面合作,于2021年12月成立的半导体产业技术创新与成果转化平台。
        </text>
        <text class="intro-text">
          研究院以建成半导体产业技术创新与成果转化平台为目标,结合地区发展需求,立足为盐城高新区发展汇聚、培养一批未来信息所需的高端人才...
        </text>
      </view>
      <view class="intro-footer">
        <up-button
          type="primary"
          shape="circle"
          size="small"
          @tap="toCompanyDetail"
          class="detail-btn"
        >
          查看详情
        </up-button>
      </view>
    </view>

    <view v-if="updata" class="updata">
      <block v-for="(item, index) in taglist" :key="index">
        <!-- 每日上新 -->
        <!-- <view
          v-if="item.style==='2' && item.prods && item.prods.length"
          class="up-to-date"
        >
          <view class="title">
            <text>{{ item.title }}</text>
            <view
              class="more-prod-cont"
              data-sts="0"
              :data-id="item.id"
              :data-title="item.title"
              @tap="toClassifyPage"
            >
              <text class="more">
                查看更多
              </text>
            </view>
          </view>
          <view class="item-cont">
            <block
              v-for="(prod, index2) in item.prods"
              :key="index2"
            >
              <view
                class="prod-item"
                :data-prodid="prod.prodId"
                @tap="toProdPage"
              >
                <view>
                  <view class="imagecont">
                    <img-show
                      :src="prod.pic"
                      :class-list="['prodimg']"
                    />
                  </view>
                  <view class="prod-text">
                    {{ prod.prodName }}
                  </view>
                  <view class="price">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(prod.price)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(prod.price)[1] }}
                    </text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view> -->

        <!-- 商城热卖 -->
        <view
          v-if="item.style === '1' && item.prods && item.prods.length"
          class="hot-sale"
        >
          <view class="title">
            <text>{{ item.title }}</text>
            <view
              class="more-prod-cont"
              data-sts="0"
              :data-id="item.id"
              :data-title="item.title"
              @tap="toClassifyPage"
            >
              <text class="more"> 更多 </text>
              <text class="arrow" />
            </view>
          </view>
          <view class="hotsale-item-cont">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view
                class="prod-items"
                :data-prodid="prod.prodId"
                @tap="toProdPage"
              >
                <view class="hot-imagecont">
                  <img-show :src="prod.pic" :class-list="['hotsaleimg']" />
                </view>
                <view class="hot-text">
                  <view class="hotprod-text">
                    {{ prod.prodName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="prod-text-info">
                    <view class="price">
                      <text class="symbol"> ￥ </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.price)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.price)[1] }} </text
                      ><text style="font-size: 26rpx">起</text>
                    </view>
                  </view>
                  <up-button
                    @tap="toProdPage($event, prod.prodId)"
                    plain
                    color="#0f3679"
                    shape="circle"
                    size="small"
                    style="width: 80%; font-size: 28rpx"
                    type="primary"
                    >立即预约</up-button
                  >
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 更多宝贝 -->
        <view
          v-if="item.style === '0' && item.prods && item.prods.length"
          class="more-prod"
        >
          <view class="title">
            {{ item.title }}
          </view>
          <view class="prod-show">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view
                class="show-item"
                :data-prodid="prod.prodId"
                @tap="toProdPage"
              >
                <view class="more-prod-pic">
                  <img-show :src="prod.pic" :class-list="['more-pic']" />
                </view>
                <view class="prod-text-right">
                  <view class="prod-text more">
                    {{ prod.prodName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="b-cart">
                    <view class="price">
                      <text class="symbol"> ￥ </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.price)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.price)[1] }}
                      </text>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
const wxs = number();
const indicatorColor = ref("#d1e5fb");
const indicatorActiveColor = ref("#1b7dec");
const autoplay = ref(true);
const interval = ref(4000);
const duration = ref(1000);
const indexImgs = ref([]);
const seq = ref(0);
const news = ref([]);
const taglist = ref([]);
const updata = ref(true);

onLoad(() => {
  getAllData();
});
onShow(() => {
  // #ifdef MP-WEIXIN
  uni.getSetting({
    success(res) {
      if (!res.authSetting["scope.userInfo"]) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
    },
  });
  // #endif
  http.getCartCount(); // 重新计算购物车总数量
});

onPullDownRefresh(() => {
  // 模拟加载
  setTimeout(() => {
    getAllData();
    uni.stopPullDownRefresh(); // 停止下拉刷新
  }, 100);
});

const callCustomerService = () => {
  uni.makePhoneCall({
    phoneNumber: "18205187922",
    success: () => {
      console.log("客服电话拨打成功");
    },
    fail: (err) => {
      uni.showToast({
        title: "拨打电话失败",
        icon: "none",
        duration: 2000,
      });
      console.log("拨打电话失败:", err);
    },
  });
};

const getAllData = () => {
  http.getCartCount(); // 重新计算购物车总数量
  getIndexImgs();
  getNoticeList();
  getTag();
};

const toProdPage = (e, id) => {
  const prodid = e.currentTarget.dataset.prodid;

  if (prodid) {
    uni.navigateTo({
      url: "/pages/prod/prod?prodid=" + prodid,
    });
  } else {
    uni.navigateTo({
      url: "/pages/prod/prod?prodid=" + id,
    });
  }
};
/**
 * 加入购物车
 * @param item
 */
const addToCart = (item) => {
  uni.showLoading({
    mask: true,
  });
  http
    .request({
      url: "/prod/prodInfo",
      method: "GET",
      data: {
        prodId: item.prodId,
      },
    })
    .then(({ data }) => {
      http
        .request({
          url: "/p/shopCart/changeItem",
          method: "POST",
          data: {
            basketId: 0,
            count: 1,
            prodId: data.prodId,
            shopId: data.shopId,
            skuId: data.skuList[0].skuId,
          },
        })
        .then(() => {
          uni.hideLoading();
          http.getCartCount(); // 重新计算购物车总数量
          uni.showToast({
            title: "加入购物车成功",
            icon: "none",
          });
        });
    });
};

const toCouponCenter = () => {
  uni.showToast({
    icon: "none",
    title: "该功能未开源",
  });
};

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: "/pages/search-page/search-page",
  });
};

/**
 * 跳转商品活动页面
 * @param e
 */
const toClassifyPage = (e) => {
  let url =
    "/pages/prod-classify/prod-classify?sts=" + e.currentTarget.dataset.sts;
  const id = e.currentTarget.dataset.id;
  const title = e.currentTarget.dataset.title;

  if (id) {
    url += "&tagid=" + id + "&title=" + title;
  }

  uni.navigateTo({
    url,
  });
};
/**
 * 跳转公告列表页面
 */
const onNewsPage = () => {
  uni.navigateTo({
    url: "/pages/recent-news/recent-news",
  });
};

/**
 * 加载轮播图
 */
const getIndexImgs = () => {
  http
    .request({
      url: "/indexImgs",
      method: "GET",
      data: {},
    })
    .then(({ data }) => {
      indexImgs.value = data;
      seq.value = data;
    });
};

const getNoticeList = () => {
  // 加载公告
  http
    .request({
      url: "/shop/notice/topNoticeList",
      method: "GET",
      data: {},
    })
    .then(({ data }) => {
      news.value = data;
    });
};

/**
 * 加载商品标题分组列表
 */
const getTag = () => {
  http
    .request({
      url: "/prod/tag/prodTagList",
      method: "GET",
      data: {},
    })
    .then(({ data }) => {
      taglist.value = data;
      for (let i = 0; i < data.length; i++) {
        updata.value = false;
        updata.value = true;
        getTagProd(data[i].id, i);
      }
    });
};

const getTagProd = (id, index) => {
  http
    .request({
      url: "/prod/prodListByTagId",
      method: "GET",
      data: {
        tagId: id,
        size: 6,
      },
    })
    .then(({ data }) => {
      updata.value = false;
      updata.value = true;
      const taglistParam = taglist.value;
      taglistParam[index].prods = data.records;
      taglist.value = taglistParam;
    });
};
/**
 * 跳转到公司详情页
 */
const toCompanyDetail = () => {
  uni.navigateTo({
    url: "/pages/company-detail/company-detail",
  });
};

/**
 * 分享给朋友
 */
onShareAppMessage((res) => {
  return {
    title: "瀚微精测 - 专业的检测服务",
    path: "/pages/index/index",
    imageUrl: "/static/logo.png",
  };
});

/**
 * 分享到朋友圈
 */
onShareTimeline(() => {
  return {
    title: "瀚微精测 - 专业的检测服务",
    path: "/pages/index/index",
    imageUrl: "/static/logo.png",
  };
});
</script>

<style scoped lang="scss">
@import "./index.scss";
/* 客服电话悬浮框样式 */
.customer-service-float {
  position: fixed;
  right: 30rpx;
  bottom: 300rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #ff6b6b85, #ff8e5385);
  border-radius: 50%;
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }

  .service-icon {
    .icon-text {
      font-size: 36rpx;
      color: #fff;
    }
  }

  .service-text {
    font-size: 20rpx;
    color: #fff;
    margin-top: 4rpx;
    font-weight: bold;
  }
}
</style>
